今日要來了解 狀態(state)的使用,為何會有state呢?
React提供了一個方法,來監控資料的變化,
當資料內容有變動時,畫面就會被更新。
我們要來學習第一個 React hoot - useState。
Sate是一種用於儲存在組件內部的狀態或資料,
當State改變時,組件就會重新渲染,更新畫面。
基本寫法如下:
const [count, setCount] = useState(0);
useState
函式會返回一個陣列,
通常使用 陣列解構 取出兩個元素
set
開頭)。再看一個實作的範例:
import React, {useState} from 'react'
function Counter() {
// 使用 useState 宣告一個名為 count 的 state 變數,初始值為 0
const [count, setCount] = useState(0)
return (
<div>
<p>你點擊了 {count} 次</p>
{/* 點擊按鈕時,呼叫 setCount 函式更新 count 的值 */}
<button onClick={() => setCount(count + 1)}>點擊我</button>
</div>
)
}
export default Counter
useState
的運行在上面的範例中,首先用 useState(0)
來定義
初始值是 0
的 state 變數 count
,
以及更新 count
的 setCount
函式。
當點擊到按鈕時,setCount
函式被觸發將 count
的值增加 1
。
state 的改變,React 會重新渲染元件(re-render),更新畫面來顯示最新的 count
值。
而 useState
是可以傳入各種型別的,如數字、字串、布林、陣列、物件
看下方的範例:
import React, { useState } from 'react';
// 數字計數器
function NumberCounter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>數字計數器</h2>
<p>目前數字是 {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
// 字串顯示
function Greeting() {
const [name, setName] = useState('Alice');
return (
<div>
<h2>字串顯示</h2>
<p>你好, {name}!</p>
<button onClick={() => setName('Bob')}>變更名字</button>
</div>
);
}
// Bollean開關
function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<div>
<h2>Bollean開關</h2>
<p>開關狀態: {isOn ? '開啟' : '關閉'}</p>
<button onClick={() => setIsOn(!isOn)}>切換</button>
</div>
);
}
// 陣列任務清單
function TodoList() {
const [todos, setTodos] = useState(['學習 React', '寫測試']);
const addTodo = () => {
setTodos([...todos, '新任務']);
};
return (
<div>
<h2>陣列任務清單</h2>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
<button onClick={addTodo}>新增任務</button>
</div>
);
}
// 物件用戶資料
function UserProfile() {
const [profile, setProfile] = useState({ name: 'Alice', age: 25 });
const updateName = () => {
setProfile({ ...profile, name: 'Bob' });
};
return (
<div>
<h2>物件用戶資料</h2>
<p>名字: {profile.name}</p>
<p>年齡: {profile.age}</p>
<button onClick={updateName}>更改名字</button>
</div>
);
}
function App() {
return (
<>
<NumberCounter />
<Greeting />
<Toggle />
<TodoList />
<UserProfile />
</>
);
}
export default App;
在學習使用 React Hook 時,有兩個非常重要的規則必須遵守,這樣才能確保程式的正常運作。
不要在迴圈、條件式或巢狀函式內呼叫 Hook。 Hook 應該在函式的「最上層」呼叫,而不是在任何條件判斷(如 if
)或迴圈內呼叫。
為什麼這麼做? 當 React 每次渲染你的元件時,Hook 都必須以相同的順序被呼叫。這樣 React 才能正確地追蹤每個 Hook 的狀態。如果你在迴圈或條件式內呼叫 Hook,這個順序可能會改變,導致 React 無法正常工作。
簡單範例:
// 正確:在函式的最上層呼叫 Hook
function MyComponent() {
const [count, setCount] = useState(0); // 正確
if (count > 0) {
// 錯誤:不要在條件判斷內呼叫 Hook
// const [error, setError] = useState(null);
}
return <div>{count}</div>;
}
不在一般的 JavaScript 函式中呼叫 Hook。 Hook 應該只在 React 元件的函式內部,或是在自定義 Hook 中被使用。
為什麼這麼做? 這樣可以確保所有與狀態相關的邏輯都在 React 元件內處理,並且讓你的程式碼更加清晰可見。
簡單範例:
// 正確:在 React 元件中使用 Hook
function MyComponent() {
const [count, setCount] = useState(0); // 正確
return <div>{count}</div>;
}
// 正確:在自定義 Hook 中使用 Hook
function useCustomHook() {
const [state, setState] = useState(0); // 正確
return state;
}
//錯誤:在一般函式中使用 Hook
function regularFunction() {
// const [value, setValue] = useState(0); // 錯誤
}
透過遵守這兩條規則,你可以確保在每次元件渲染時,
React 能正確地追蹤狀態和效果,讓應用程式運行更加順暢。
useState
則是最常用的 Hook,它讓你能夠在元件中輕鬆追蹤和更新狀態。useState
都能靈活應用,讓元件在資料改變時自動更新,從而提升使用者體驗。本文將會同步更新到我的部落格